 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .box {
        padding: 10px;
        width: 500px;
        height: 400px;
        margin: auto;
        background-color: green;
    }

    .info {
        padding: 30px 0 0 0;
    }

    .info li {
        margin-bottom: 10px;
    }

    .info p {
        background-color: pink;
    }
    </style>
</head>

<body>
<div class="box">
    <select id="city">
        <option value="101010100">北京</option>
        <option value="101020100">上海</option>
        <option value="101280101">广州</option>
        <option value="101280601">深圳</option>
    </select>
    <input type="button" value="查询" id="query">
    <!-- 天气 -->
    <div class="info"></div>
</div>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="template.js"></script>
<script type="text/javascript">
$(function() {
    $('#query').click(function() {
        var code = $('#city').val();
        $.ajax({
        	url : 'http://cdn.weather.hao.360.cn/api_weather_info.php',
        	data : {app:'hao360',code:code},
        	jsonp : '_jsonp',
        	jsonpCallback : 'abc',
        	dataType : 'jsonp',
        	success : function(data){ 
                var source = '{{if weather}}'+
                        '<div>'+
                            '{{each weather as value}}'+
                                '<span>日期：{{value.date}}</span>'+
                                '<ul>'+
                                    '<li>白天天气{{value.info.day[1]}}</li>'+
                                    '<li>白天温度{{value.info.day[2]}}</li>'+
                                    '<li>白天风向{{value.info.day[3]}}</li>'+
                                    '<li>白天风速{{value.info.day[4]}}</li>'+
                                    '<li>----------------------------</li>'+
                                '</ul>'+
                                '<ul>'+
                                    '<li>夜间天气{{value.info.night[1]}}</li>'+
                                    '<li>夜间温度{{value.info.night[2]}}</li>'+
                                    '<li>夜间风向{{value.info.night[3]}}</li>'+
                                    '<li>夜间风速{{value.info.night[4]}}</li>'+
                                '</ul>'+
                            '{{/each}}'+
                        '</div>'+
                        '{{/if}}';

        		var render = template.compile(source);
                var html = render(data);
        		$('.info').html(html);
        	}
        });

    });
})
</script>




</body>

</html>